<template>
<div class='shopcar-container'>
    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner" v-for="(item , i) in cargoodslist" :key="item.id">
                <mt-switch v-model= $store.getters.goodsselectlist[item.id] @change='updateselect(item.id,$store.getters.goodsselectlist[item.id])' ></mt-switch>
                <img :src="item.thumb_path" alt="">
                <div class='car-right'>
                    <h1>{{item.title}}</h1>
                    <p>
                        <span class='red'>￥{{item.sell_price}}</span>
                        <numbox :number = $store.getters.goodscountlist[item.id] :id=item.id></numbox>
                        <a href='#' @click.prevent='removecargoods(item.id,i)'>删除</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner jiesuan">
                <div class="jiesuanleft">
                    <p>总计（不含运费）</p>
                    <p>已勾选商品<span class="red">{{$store.getters.selectedamountprices.amount}}</span>,总价<span class="red">￥{{$store.getters.selectedamountprices.prices}}</span></p>
                </div>
                <mt-button type='danger'> 去结算</mt-button>
            </div>
        </div>
    </div>
</div>
    
</template>
<script>
import numbox from '../subcomponents/CarNumbox.vue'
export default{
    data(){
        return{
            cargoodslist:[],
            selected:true
        }
    },
    created(){
        this.getshopcarlist()
    },
    methods:{
        getshopcarlist(){
            // console.log(this.$store.getters.shopcarids.join(","))
            this.$http.get("api/goods/getshopcarlist/"+ this.$store.getters.shopcarids.join(",")).then(response=>{
                if(response.body.status==0){
                    this.cargoodslist = response.body.message
                }
            })

        },
        updateselect(id,selected){
            // console.log(id+'---'+selected)
            this.$store.commit("updatedata",{id,selected,type:'selected'})
        },
        removecargoods(id,i){
            this.cargoodslist.splice(i,1)
            this.$store.commit("removedata",id)
        }
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss" >
.shopcar-container{
    background-color: #eee;
    overflow: hidden;
    .mui-card-content-inner{
        display:flex;
        align-items:center;
        // justify-content:space-between;
        img{
            width:60px;
            height:60px;
            
        }
        .car-right{
            display:flex;
            flex-direction:column;
            justify-content: space-between;
            h1{
                font-size:13px;
            }
            .red{
                color:#f00;
                font-weight:bold;
            }
            
        }
        
    }
    .jiesuan{
        display:flex;
        justify-content: space-between;
        align-items:center;
        .red{
            color:#f00;
            font-size:14px;
            font-weight:bold;
        }
    }
}
</style>